<template>
  <div>
    <div>
      <el-row>
        <el-col>
          <el-form :inline="true" :model="searchResident" class="demo-form-inline">
            <el-form-item label="楼栋">
              <el-select style="width: 120px" v-model="searchResident.buildingId" clearable @change="selectAllUnit()"
                         placeholder="请选择楼栋">
                <el-option
                    v-for="building in buildings"
                    :key="building.id"
                    :label="building.buildingName"
                    :value="building.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="单元">
              <el-select style="width: 130px" v-model="searchResident.unitId" clearable @change="selectAllHouse()"
                         placeholder="请选择单元号">
                <el-option
                    v-for="item in units"
                    :key="item.id"
                    :label="item.unitName"
                    :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="门牌">
              <el-select style="width: 130px" v-model="searchResident.houseId" clearable placeholder="请选择门牌号">
                <el-option
                    v-for="item in houses"
                    :key="item.id"
                    :label="item.houseNumber"
                    :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="居民类型">
              <el-select v-model="searchResident.residentTypeId" clearable placeholder="请选择居民类型">
                <el-option v-for="item in residentTypes"
                           :key="item.id"
                           :label="item.type"
                           :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="姓名">
              <el-input v-model="searchResident.name" clearable placeholder="姓名"></el-input>
            </el-form-item>
            <el-form-item label="录入时间">
              <el-date-picker
                  v-model="startTime"
                  clearable
                  type="date"
                  value-format="yyyy-MM-dd"
                  @change="handleStartDateChange"
                  placeholder="起始日期">
              </el-date-picker>-
              <el-date-picker
                  v-model="endTime"
                  clearable
                  type="date"
                  value-format="yyyy-MM-dd"
                  :disabled-date="disabledEndDate"
                  placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="findAllResident">查询</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>
    <div>
    <el-table
        :data="pageInfo.list"
        border
        style="width: 100%">
      <el-table-column
          fixed
          type="index"
          label="序号"
          width="100">
      </el-table-column>
      <el-table-column
          fixed
          prop="id"
          label="编号"
          width="100">
      </el-table-column>
      <el-table-column
          prop="name"
          label="姓名"
          width="120">
      </el-table-column>
      <el-table-column
          prop="phone1"
          label="手机号码"
          width="120">
      </el-table-column>
      <el-table-column
          prop="card"
          label="身份证号"
          width="300">
      </el-table-column>
      <el-table-column
          prop="residentType.type"
          label="居民类型"
          width="80">
      </el-table-column>
      <el-table-column
          prop="building.buildingName"
          label="楼栋"
          width="80">
      </el-table-column>
      <el-table-column
          prop="unit.unitName"
          label="单元"
          width="80">
      </el-table-column>
      <el-table-column
          prop="house.houseNumber"
          label="门号"
          width="80">
      </el-table-column>
      <el-table-column
          fixed="additionTime"
          label="录入时间"
          width="100">
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
          width="140">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row.id)" type="text" size="small">查看</el-button>
          <el-button @click="handleUpdate(scope.row.id)" type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table><el-pagination
        @current-change="handleCurrentChange"
        background
        layout="prev, pager, next,total"
        :current-page="pageNum"
        :page-size="pageInfo.pageSize"
        :total="pageInfo.total">
    </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: "ManageResidentListView",
  data() {
    return {
      searchResident:{
        name:'',
        house:{id:null},
        building:{id:null},
        unit:{id:null},
        residentType:{id:null},
        buildingId:null,
        unitId:null,
        houseId:null,
        residentTypeId:null,
      },
      pageNum:1,
      startTime:'',
      endTime:'',
      residentList:[],
      buildings:[],
      units:[],
      houses:[],
      residentTypes:[],
      pageInfo:{},
    }
  },
  created(){
    this.findAllResident();
    this.selectAllBuilding();
    this.selectAllResidentType();
  },
  methods: {
    findAllResident() {
      this.$axios.post("manage/findAllResident", this.searchResident, {
        params: {
          pageNum: this.pageNum,
          startTime: this.startTime,
          endTime: this.endTime
        }
      }).then(res => {
        this.pageInfo = res.data.pageInfo;
      });
    },
    selectAllResidentType(){
      this.$axios.get("manage/findAllResidentType").then(res=>{
        this.residentTypes = res.data.residentTypes;
      })
    },
    selectAllUnit(){
      console.log(this.searchResident.buildingId)
      this.$axios.get("manage/unit/selectUnitById", {params: {id: this.searchResident.buildingId}})
          .then(response => {
            this.units = response.data.data;
          })
    },
    selectAllBuilding() {
      this.$axios.get("manage/selectAllBuilding")
          .then(response => {
            this.buildings = response.data.data;
          })
    },
    selectAllHouse(){
      console.log(this.searchResident.unitId);
      this.$axios.get("manage/selectHouseById",{params:{id:this.searchResident.unitId}}).then(res=>{
        this.houses = res.data.house;
      })
    },
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum;
      this.findAllResident();
    },
    handleClick(row) {
      console.log(row);
    },
    handleUpdate(row){
      this.$router.push({path:"/manage/addresident",query:{id:row}})
    },
    handleDelete(index) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log(index);
        this.$axios.get("manage/deleteResident", {
          params: {
            id: this.pageInfo.list[index].id,
            houseId: this.pageInfo.list[index].houseId
          }
        }).then(res => {
          this.pageInfo.list.splice(index, 1);
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //日期
    handleStartDateChange(value) {
      // 当开始日期改变时，更新结束日期的禁用日期
      this.endTime = ''; // 可选：清空结束日期，以便用户重新选择
      this.disabledEndDate = (time) => {
        // 如果开始日期存在并且选择的日期小于开始日期，则禁用该日期
        if (value && time.getTime() < value.getTime()) {
          return true;
        }
        return false;
      };
    },
    disabledEndDate(time) {
      // 默认禁用函数，当开始日期未选择时，禁用所有日期（可选）
      if (!this.startTime) {
        return true;
      }
      // 调用 handleStartDateChange 中定义的禁用函数
      return this.handleStartDateChange.bind(this, this.startTime)(time);
    },
  }
}
</script>

<style scoped>

</style>
